<template>
	<div class="tree-container">
		<!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search"></el-input> -->
		<div class="tree-title" v-html="listTypeNumber == 0 ? '前置装置集合' : listTypeNumber == 1 ? '白名单词库集合' : '白名单图库集合'"></div>
		<el-tree
			:data="treeData"
			:props="defaultProps"
			node-key="id"
			default-expand-all
			@node-click="handleLeftclick"
			@node-drag-start="handleDragStart"
			@node-drag-enter="handleDragEnter"
			@node-drag-leave="handleDragLeave"
			@node-drag-over="handleDragOver"
			@node-drag-end="handleDragEnd"
			@node-drop="handleDrop"
			@node-contextmenu="rightClick"
			:filter-node-method="filterNode"
			:draggable="false"
			:allow-drop="allowDrop"
			:allow-drag="allowDrag"
			ref="tree"
		>
			<span class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(data)">
				<span v-show="!data.isEdit">
					<span :class="[data.id >= 99 ? 'slot-t-node--label' : '',data.status == 0 ? 'terminal_success' : (data.status == 1 ? 'terminal_Danger' : (data.status == 2 ? 'terminal_approve' : ''))]">{{ node.label }}</span>
				</span>
				<span v-show="data.isEdit">
					<el-input
						class="slot-t-input"
						size="mini"
						autofocus
						v-model="data.groupName"
						:ref="'slotTreeInput' + data.id"
						@blur.stop="NodeBlur(node, data)"
						@keydown.native.enter="NodeBlur(node, data)"
					></el-input>
				</span>
			</span>
		</el-tree>
		<el-card class="box-card" ref="card" v-show="menuVisible">
			<!-- <div @click="addSameLevelNode()" v-show="firstLevel"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加</div> -->

			<!-- 终端分组 -->
			<div @click="addSameLevelNode()" v-show="listTypeNumber == 0"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;增加同级分组</div>

			<div class="add" @click="addChildNode()" v-show="listTypeNumber == 0">
				<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;增加子级分组
			</div>

			<div class="delete" @click="deleteNode()" v-show="listTypeNumber == 0"><i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除分组</div>

			<div class="edit" @click="editNode()" v-show="listTypeNumber == 0"><i class="el-icon-edit"></i>&nbsp;&nbsp;修改分组</div>

			<!-- 敏感词库 -->
			<div @click="addSameLevelNode()" v-show="(listTypeNumber == 1)"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;增加词库</div>

			<div class="delete" @click="deleteNode()" v-show="(listTypeNumber == 1)"><i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除词库</div>

			<div class="edit" @click="editNode()" v-show="(listTypeNumber == 1)"><i class="el-icon-edit"></i>&nbsp;&nbsp;修改词库</div>

			<!-- 图库 -->
			<div @click="addSameLevelNode()" v-show="(listTypeNumber == 2)"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;增加图库</div>

			<div class="delete" @click="deleteNode()" v-show="(listTypeNumber == 2)"><i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除图库</div>

			<div class="edit" @click="editNode()" v-show="(listTypeNumber == 2)"><i class="el-icon-edit"></i>&nbsp;&nbsp;修改图库</div>
		</el-card>
	</div>
</template>
<script>
export default {
	name: "tree",
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		cocnfig: {
			type: Object,
			default: () => {},
		},
		listType: {
			type: Number,
			default: undefined,
		},
		isRightClick: {
			type: Boolean,
			default: true,
		},
		handleNode: {
			type: Function,
			default: () => {},
		},
		handleNodeDelete: {
			type: Function,
			default: () => {},
		},
		handleNodeAdd: {
			type: Function,
			default: () => {},
		},
		handleNodeEdit: {
			type: Function,
			default: () => {},
		},
	},
	data() {
		return {
			eleId: "",
			isShow: false,
			currentData: "",
			currentNode: "",
			menuVisible: false,
			// firstLevel: false,
			// filterText: "",
			maxexpandId: 4,
			treeData: this.list,
			defaultProps: this.cocnfig,
			listTypeNumber: this.listType,
			oldNodeName: "", // 旧的节点名
			isRightClickTree: this.isRightClick
		};
	},
	methods: {
		NodeBlur(Node, data) {
			console.log(Node, data);
			if (data.groupName.length === 0) {
				this.$message.error("菜单名不可为空！");
				return false;
			} else if (this.oldNodeName == data.groupName) {
				// this.$message.error("菜单名没有修改！");
				this.$set(data, "isEdit", false);
				return false;
			} else {
				if (data.isEdit) {
					this.$set(data, "isEdit", false);
					console.log(data);
					console.log(data.isEdit);
					if (data.type) {
						if (this.listTypeNumber == 0) {
							this.handleNodeAdd(data.groupName, data.parentGroupId);
						} else if (this.listTypeNumber == 1) {
							this.handleNodeAdd(data.groupName);
						} else if (this.listTypeNumber == 2) {
							this.handleNodeAdd(data.groupName);
						}
					} else {
						if (this.listTypeNumber == 0) {
							this.handleNodeEdit(data.groupName, data.id);
						} else if (this.listTypeNumber == 1) {
							this.handleNodeEdit(data.groupName, data.id);
						} else if (this.listTypeNumber == 2) {
							this.handleNodeEdit(data.groupName, data.id);
						}
					}
				}
				this.$nextTick(() => {
					this.$refs["slotTreeInput" + data.id].$refs.input.focus();
				});
			}
		},
		// 查询
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		allowDrop(draggingNode, dropNode, type) {
			if (dropNode.data.label === "二级 3-1") {
				return type !== "inner";
			} else {
				return true;
			}
		},
		allowDrag(draggingNode) {
			return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
		},
		// 鼠标右击事件
		rightClick(event, object, Node, element) {
			console.log(event);
			console.log(object);
			console.log(element);
			console.log(Node);
			if (object.isRightClick == false) { 
				return 
			}
			if (this.isRightClickTree) {
				this.currentData = object;
				this.currentNode = Node;
				// if (Node.level === 1) {
				// 	this.firstLevel = true;
				// } else {
				// 	this.firstLevel = false;
				// }
				this.menuVisible = true; // let menu = document.querySelector('#card') // /* 菜单定位基于鼠标点击位置 */ // menu.style.left = event.clientX + 'px' // menu.style.top = event.clientY + 'px'
				document.addEventListener("click", this.foo);
				this.$refs.card.$el.style.left = event.clientX + 40 + "px";
				this.$refs.card.$el.style.top = event.clientY - 10 + "px";
			}
		},
		// 鼠标左击事件
		handleLeftclick(data, node) {
			console.log(data, node);
			this.handleNode(data);
			this.foo();
		},
		//  取消鼠标监听事件 菜单栏
		foo() {
			this.menuVisible = false; //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
			document.removeEventListener("click", this.foo);
		},
		// 增加同级节点事件
		addSameLevelNode() {
			var data = {};
			if (this.listTypeNumber == 0) {
				data = { groupName: "新增节点", parentGroupId: this.currentNode.data.parentGroupId, children: [], isEdit: true, type: "node" };
			} else if (this.listTypeNumber == 1) {
				data = { groupName: "新增节点", parentGroupId: this.currentNode.data.parentGroupId, isEdit: true, type: "node" };
			} else if (this.listTypeNumber == 2) {
				data = { groupName: "新增节点", parentGroupId: this.currentNode.data.parentGroupId, isEdit: true, type: "node" };
			}

			this.$refs.tree.append(data, this.currentNode.parent);
		},
		// 增加子级节点事件
		addChildNode() {
			console.log(this.currentData);
			console.log(this.currentNode);
			// if (this.currentNode.level >= 3) {
			// 	this.$message.error("最多只支持三级！");
			// 	return false;
			// }
			// let id = Math.ceil(Math.random() * 100);
			// var data = { id: id, groupName: "新增节点", parentGroupId: this.currentNode.data.id, children: [], isEdit: true };
			var data = { groupName: "新增子节点", parentGroupId: this.currentNode.data.id, children: [], isEdit: true, type: "nodeChild" };
			this.$refs.tree.append(data, this.currentNode);
		},
		// 删除节点
		deleteNode() {
			// this.$refs.tree.remove(this.currentNode);
			this.handleNodeDelete(this.currentNode.data.id);
		},
		// 编辑节点
		editNode(data) {
			console.log(data);
			if (this.isRightClickTree) { 
				this.currentData = data ? data : this.currentData;
				if (!this.currentData.isEdit) {
					this.$set(this.currentData, "isEdit", true);
				}
				// 获取焦点
				this.$nextTick(() => {
					this.oldNodeName = this.currentData.groupName;
					this.$refs["slotTreeInput" + this.currentData.id].focus();
				});
			}
		},
		handleDragStart(node, ev) {
			console.log("drag start", node);
			console.log(ev);
		},
		handleDragEnter(draggingNode, dropNode, ev) {
			console.log("tree drag enter: ", dropNode.label);
			console.log(ev);
		},
		handleDragLeave(draggingNode, dropNode, ev) {
			console.log("tree drag leave: ", dropNode.label);
			console.log(ev);
		},
		handleDragOver(draggingNode, dropNode, ev) {
			console.log("tree drag over: ", dropNode.label);
			console.log(ev);
		},
		handleDragEnd(draggingNode, dropNode, dropType, ev) {
			console.log("tree drag end: ", dropNode && dropNode.label, dropType);
			console.log(ev);
		},
		handleDrop(draggingNode, dropNode, dropType, ev) {
			console.log("tree drop: ", dropNode.label, dropType);
			console.log(ev);
		},
	},
	// watch: {
	// 	filterText(val) {
	// 		this.$refs.tree.filter(val);
	// 	},
	// },
	mounted() { },
};
</script>
<style scoped lang="less">
/* 点击节点时的选中颜色 */
.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
	color: #a8d55f !important;
}
.tree-container /deep/ .el-tree-node__expand-icon.expanded {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.tree-container /deep/ .el-icon-caret-right:before {
	content: "\e791";
	font-size: 18px;
}

.tree-container /deep/ .el-tree-node__expand-icon {
	margin: 0 8px 4px 0;
	padding: 0px;
}
.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
	margin-left: 0px;
}

.tree-container /deep/ .el-tree-node {
	position: relative;
	/*padding-left: 16px;*/
}

.tree-container /deep/ .el-tree-node__children {
	padding-left: 16px;
}

.tree-container /deep/ .el-tree > .el-tree-node:before {
	border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
	border-top: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:before {
	border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
	border-top: none;
}

.tree-container /deep/ .el-tree-node:before {
	content: "";
	left: 10px;
	position: absolute;
	right: auto;
	border-width: 1px;
}

.tree-container /deep/ .el-tree-node:after {
	content: "";
	left: 10px;
	position: absolute;
	right: auto;
	border-width: 1px;
}

.tree-container /deep/ .el-tree-node:before {
	border-left: 1px dashed #ccc;
	bottom: 0px;
	height: 100%;
	top: -19px;
	width: 1px;
}

.tree-container /deep/ .el-tree-node:after {
	border-top: 1px dashed #ccc;
	height: 25px;
	top: 20px;
	width: 20px;
}

.el-tree-node :last-child:before {
	height: 40px;
}

.tree-container {
	/*margin: 10px;*/
	width: 107%;
	height: 100%;
	overflow-y: scroll;
}
.tree-container /deep/ .el-tree .el-tree-node {
	position: relative;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content {
	height: 34px;
	padding-left: 0px !important;
	border: none;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
	border-left: 1px dashed #ccc;
	height: 100%;
	top: 0;
	width: 1px;
	margin-left: 1px;
	margin-top: 0px;
	z-index: 8;
}
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
	border-left: 0px dashed #ccc;
	height: 100%;
	top: 0;
	width: 1px;
	margin-left: 1px;
	margin-top: 0px;
	z-index: 8;
}

.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
	border-top: 1px dashed #ccc;
	height: 1px;
	top: 18px;
	width: 13px;
	margin-left: 1px;
	z-index: 8;
}

.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
	border-top: 0px dashed #ccc;
}

.tree-container .el-tree-node .el-tree-node__content::before,
.tree-container .el-tree-node .el-tree-node__content::after {
	content: "";
	position: absolute;
	right: auto;
}
/deep/.el-table__placeholder {
	padding-left: 8px;
}
/deep/.el-card__body {
	padding: 10px !important;
	> div {
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
		&:hover {
			color: #a8d55f;
		}
	}
}

.text {
	font-size: 14px;
}

.tree-title {
	width: 99%;
	height: 52px;
	line-height: 52px;
	padding: 0 16px;
	box-sizing: border-box;
}

.el-tree {
	/*
	width: 20%;
	margin-top: 10px;
  */
	width: 99%;
	height: calc(100% - 52px);
}
.search {
	width: 20%;
}

.item {
	padding: 18px 0;
}

.add {
	cursor: pointer;
	margin-top: 10px;
}

.delete {
	margin: 10px 0;
	cursor: pointer;
}

.edit {
	margin-bottom: 10px;
	cursor: pointer;
}

.search {
	cursor: pointer;
}

.box-card {
	width: 150px;
	position: absolute;
	z-index: 1000;
}
.terminal_success{
	color: #4A9E4A;
}
.terminal_Danger{
	color: #CD3038;
}
.terminal_approve{
	color: #E38925;
}
</style>
